<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>云端阅读 - 沉浸式小说体验</title>
    <!-- 引入Bootstrap 3 CSS -->
    <link rel="stylesheet" href="static/ku/bootstrap-3.4.1/css/bootstrap.min.css">
    <!-- 引入Font Awesome -->
    <link rel="stylesheet" href="static/ku/Icon/css/all.min.css">
    <!-- 引入自定义样式 -->
    <link rel="icon" href="static/image/205.png" />
    <link rel="stylesheet" href="static/css/read.css">
</head>

<body>
    <!-- 顶部导航栏 -->
    <header class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <h1 class="navbar-brand">小说阅读器</h1>
            </div>
            <div class="nav navbar-nav navbar-right">
                <li><button id="theme-toggle" class="btn btn-link navbar-btn"><i class="fa fa-moon-o"></i> 夜间模式</button>
                </li>
                <li><button class="add-bookmark btn btn-link navbar-btn"><i class="fa fa-bookmark-o"></i> 书签</button>
                </li>
            </div>
        </div>
    </header>

    <div class="container-fluid content-wrapper">
        <!-- 左侧章节目录 -->
        <aside id="chapter-sidebar" class="col-md-2">
            <div class="sidebar-header">
                <h3>章节列表</h3>
            </div>
            <div class="chapter-list">
                <ul class="list-group">
                    <!-- <li class="list-group-item active"><a href="#">第一章：新的征程</a></li>
                    <li class="list-group-item"><a href="#">第二章：新的征程</a></li>
                    <li class="list-group-item"><a href="#">第三章：新的征程</a></li>
                    <li class="list-group-item"><a href="#">第四章：新的征程</a></li>
                    <li class="list-group-item"><a href="#">第五章：新的征程</a></li>
                    <li class="list-group-item"><a href="#">第六章：新的征程</a></li>
                    <li class="list-group-item"><a href="#">第七章：新的征程</a></li>
                    <li class="list-group-item"><a href="#">第八章：新的征程</a></li>
                    <li class="list-group-item"><a href="#">第九章：新的征程</a></li>
                    <li class="list-group-item"><a href="#">第十章：新的征程</a></li>
                    <li class="list-group-item"><a href="#">第十章：新的征程</a></li>
                    <li class="list-group-item"><a href="#">第十章：新的征程</a></li>
                    <li class="list-group-item"><a href="#">第十章：新的征程</a></li>
                    <li class="list-group-item"><a href="#">第十章：新的征程</a></li>
                    <li class="list-group-item"><a href="#">第十章：新的征程</a></li>
                    <li class="list-group-item"><a href="#">第十章：新的征程</a></li>
                    <li class="list-group-item"><a href="#">第十章：新的征程</a></li>
                    <li class="list-group-item"><a href="#">第十章：新的征程</a></li>
                    <li class="list-group-item"><a href="#">第十章：新的征程</a></li>
                    <li class="list-group-item"><a href="#">第十章：新的征程</a></li>
                    <li class="list-group-item"><a href="#">第十章：新的征程</a></li>
                    <li class="list-group-item"><a href="#">第十章：新的征程</a></li>
                    <li class="list-group-item"><a href="#">第十章：新的征程</a></li>
                    <li class="list-group-item"><a href="#">第十章：新的征程</a></li>
                    <li class="list-group-item"><a href="#">第十章：新的征程</a></li>
                    <li class="list-group-item"><a href="#">第十章：新的征程</a></li>
                    <li class="list-group-item"><a href="#">第十章：新的征程</a></li>
                    <li class="list-group-item"><a href="#">第十章：新的征程</a></li>
                    <li class="list-group-item"><a href="#">第十章：新的征程</a></li>
                    <li class="list-group-item"><a href="#">第十章：新的征程</a></li>
                    <li class="list-group-item"><a href="#">第十章：新的征程</a></li>
                    <li class="list-group-item"><a href="#">第十章：新的征程</a></li>
                    <li class="list-group-item"><a href="#">第十章：新的征程</a></li>
                    <li class="list-group-item"><a href="#">第十章：新的征程</a></li>
                    <li class="list-group-item"><a href="#">第十章：新的征程</a></li>
                    <li class="list-group-item"><a href="#">第十章：新的征程</a></li>
                    <li class="list-group-item"><a href="#">第十章：新的征程</a></li>
                    <li class="list-group-item"><a href="#">第十章：新的征程</a></li>
                    <li class="list-group-item"><a href="#">第十章：新的征程</a></li>
                    <li class="list-group-item"><a href="#">第十章：新的征程</a></li>
                    <li class="list-group-item"><a href="#">第十章：新的征程</a></li>
                    <li class="list-group-item"><a href="#">第十章：新的征程</a></li> -->
                </ul>
            </div>
        </aside>

        <!-- 中间小说内容区 -->
        <main class="col-md-8">
            <div class="chapter-navigation text-center">
                <button class="prev-chapter btn btn-default disabled"><i class="fa fa-chevron-left"></i> 上一章</button>
                <button class="next-chapter btn btn-default">下一章<i class="fa fa-chevron-right"></i></button>
            </div>

            <div class="chapter-title text-center">
                <h1>第一章：初入江湖</h1>
            </div>

            <div class="chapter-content">
                <p>清晨的阳光透过窗棂，洒在青石板铺就的小路上。少年背着简单的行囊，站在城门口，望着"龙门镇"三个苍劲有力的大字，眼中充满了期待与忐忑。</p>

                <p>他叫林风，今年十六岁，来自乡下的一个小村庄。三个月前，养育他的爷爷去世了，临终前交给了他一封信和一把锈迹斑斑的铁剑，告诉他身世之谜需要自己去探寻，而答案，或许就在这江湖之中。</p>

                <p>"江湖，究竟是什么样子的呢？"林风喃喃自语。爷爷生前总是给他讲江湖上的英雄故事，那些仗剑天涯、行侠仗义的侠客们，是他从小的偶像。</p>

                <p>走进龙门镇，街道两旁店铺林立，人来人往，叫卖声、谈笑声不绝于耳，一派繁华景象。这是林风第一次见到这么大的镇子，好奇地东张西望，一时间竟忘了自己要去哪里。</p>

                <p>正当他看得入神时，忽然听到前方传来一阵喧哗。"让开！都给我让开！"几个身着黑衣的壮汉推搡着路人，簇拥着一个锦衣华服的公子哥走了过来。那公子哥面色倨傲，眼神轻蔑地扫过周围的人，仿佛所有人都入不了他的眼。
                </p>

                <p>林风下意识地往旁边躲了躲，但还是被一个壮汉推了一把，踉跄着差点摔倒。"走路不长眼睛吗？"那壮汉厉声呵斥道。</p>

                <p>林风站稳身子，皱了皱眉，却没有说话。他谨记爷爷的教诲，初入江湖，凡事要忍耐，不可轻易与人争执。</p>

                <p>然而，那锦衣公子却停下了脚步，饶有兴致地打量着林风，特别是他背上的那把锈剑。"哟，这不是乡下小子吗？还带着把破剑，难道也想闯荡江湖？"公子哥嗤笑道，引来手下们一阵哄笑。</p>

                <p>林风的脸色有些发白，紧紧握住了拳头，但终究还是强压下了心中的怒火，侧身想从他们身边绕过去。</p>

                <p>"站住！"锦衣公子喝道，"把你背上的破剑留下，说不定本公子还能赏你几两银子，让你回家娶个媳妇，省得在江湖上丢人现眼。"</p>

                <p>这句话彻底激怒了林风。这把剑是爷爷留给他唯一的念想，绝不容许别人如此侮辱。他猛地转过身，直视着锦衣公子，冷冷地说："我的剑，不卖。"</p>
            </div>

            <div class="chapter-navigation text-center">
                <button class="prev-chapter btn btn-default disabled"><i class="fa fa-chevron-left"></i> 上一章</button>
                <button class="next-chapter btn btn-default"><i class="fa fa-chevron-right"></i> 下一章</button>
            </div>
        </main>

        <!-- 右侧设置面板 -->
        <aside id="settings-panel" class="col-md-2">
            <div class="settings-header">
                <h3>阅读设置</h3>
            </div>

            <div class="settings-content">
                <!-- 字体设置 -->
                <div class="setting-section">
                    <h4>字体设置</h4>
                    <div class="font-family-setting form-group">
                        <label>字体:</label>
                        <select class="font-family-select form-control">
                            <option value="serif">宋体</option>
                            <option value="sans-serif">黑体</option>
                            <option value="Georgia, serif"> Georgia</option>
                            <option value="'Times New Roman', serif">Times New Roman</option>
                            <option value="'Courier New', monospace">Courier New</option>
                        </select>
                    </div>

                    <div class="font-size-setting form-group">
                        <label>字体大小: <span class="font-size-display">16px</span></label>
                        <div class="btn-group">
                            <button class="decrease-font btn btn-sm btn-default"><i class="fa fa-minus"></i></button>
                            <button class="increase-font btn btn-sm btn-default"><i class="fa fa-plus"></i></button>
                        </div>
                    </div>

                    <div class="line-height-setting form-group">
                        <label>行高: <span class="line-height-display">1.8</span></label>
                        <div class="btn-group">
                            <button class="decrease-line-height btn btn-sm btn-default"><i
                                    class="fa fa-minus"></i></button>
                            <button class="increase-line-height btn btn-sm btn-default"><i
                                    class="fa fa-plus"></i></button>
                        </div>
                    </div>

                    <div class="paragraph-spacing-setting form-group">
                        <label>段落间距: <span class="paragraph-spacing-display">1em</span></label>
                        <div class="btn-group">
                            <button class="decrease-paragraph btn btn-sm btn-default"><i
                                    class="fa fa-minus"></i></button>
                            <button class="increase-paragraph btn btn-sm btn-default"><i
                                    class="fa fa-plus"></i></button>
                        </div>
                    </div>
                </div>

                <!-- 颜色设置 -->
                <div class="setting-section">
                    <h4>颜色设置</h4>

                    <div class="text-color-setting form-group">
                        <label>文字颜色:</label>
                        <div class="text-colors color-options">
                            <span class="color-option active" data-color="#333333"
                                style="background-color: #333333;"></span>
                            <span class="color-option" data-color="#555555" style="background-color: #555555;"></span>
                            <span class="color-option" data-color="#000000" style="background-color: #000000;"></span>
                            <span class="color-option" data-color="#8B4513" style="background-color: #8B4513;"></span>
                        </div>
                    </div>

                    <div class="bg-color-setting form-group">
                        <label>背景颜色:</label>
                        <div class="bg-colors color-options">
                            <span class="color-option active" data-color="#ffffff"
                                style="background-color: #ffffff; border: 1px solid #ccc;"></span>
                            <span class="color-option" data-color="#f5f5f5" style="background-color: #f5f5f5;"></span>
                            <span class="color-option" data-color="#f0e6d2" style="background-color: #f0e6d2;"></span>
                            <span class="color-option" data-color="#e6f2ff" style="background-color: #e6f2ff;"></span>
                        </div>
                    </div>
                </div>

                <!-- 阅读模式 -->
                <div class="setting-section">
                    <h4>阅读模式</h4>
                    <div class="reading-mode-setting">
                        <label class="radio-inline">
                            <input type="radio" name="reading-mode" value="day" checked> 白天模式
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="reading-mode" value="night"> 夜间模式
                        </label>
                    </div>
                </div>

                <!-- 重置设置 -->
                <div class="reset-settings form-group">
                    <button class="btn btn-warning btn-block"><i class="fa fa-refresh"></i> 重置所有设置</button>
                </div>
            </div>
        </aside>
    </div>

    <!-- 书签面板 -->
    <div class="bookmark-panel">
        <div class="bookmark-header">
            <h3>我的书签 <button class="close-bookmark close">&times;</button></h3>
        </div>
        <div class="bookmark-list">
            <ul class="list-group">
                <li class="bookmark-item list-group-item">
                    <a href="#">第一章：初入江湖 - 第3段</a>
                    <button class="remove-bookmark btn btn-xs btn-danger"><i class="fa fa-trash-o"></i></button>
                </li>
            </ul>
        </div>
        <div class="bookmark-actions text-center">
            <button id="add-current-bookmark" class="btn btn-primary"><i class="fa fa-plus"></i> 添加当前位置</button>
        </div>
    </div>




    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="static/ku/jQuery/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="static/ku/bootstrap-3.4.1/js/bootstrap.min.js"></script>
    <script src="static/ku/zjm/zjm.js"></script>
    <script src="static/js/read.js"></script>
</body>

</html>